<template>
  <div class="p-6 space-y-4">
    <n-card title="欢迎使用 前后端分离模板" size="small">
      <div class="flex items-center gap-3">
        <n-button type="primary" @click="count++">计数: {{ count }}</n-button>
        <n-tag type="success" size="small">Naive UI Ready</n-tag>
        <span class="text-sm text-gray-500">Tailwind 已启用</span>
      </div>
    </n-card>

    <n-card title="API 测试" size="small">
      <n-space>
        <n-button @click="fetchUsers" type="primary" secondary>请求 /user/findAll</n-button>
      </n-space>
      <pre class="mt-3 text-xs bg-gray-50 p-3 rounded border overflow-auto max-h-48">{{ data }}</pre>
    </n-card>

    <n-card title="API 测试" size="small">
      <n-space>
        <n-button @click="insertUsers" type="primary" secondary>请求 /user/insert</n-button>
      </n-space>
      <pre class="mt-3 text-xs bg-gray-50 p-3 rounded border overflow-auto max-h-48">{{ data }}</pre>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import request from '../utils/request'

const count = ref(0)
const data = ref<string>('尚未请求')

async function fetchUsers() {
  try {
    const res = await request.get<any>('/user/findAll')
    data.value = JSON.stringify(res, null, 2)
  } catch (e) {
    data.value = String(e)
  }
}

async function insertUsers() {
  try {
    const res = await request.get<any>('/user/insert')
    data.value = JSON.stringify(res, null, 2)
  } catch (e) {
    data.value = String(e)
  }
}
</script>

<style scoped>
</style>
